<template>
    <div class="page-container">
        <el-card class="card">
            <template #header>
                <div class="card-header">
                    <h2>{{ article.title }}</h2>
                    <div class="card-meta">
                        <span>分类: {{ article.categoryName }}</span>
                        <span>发表时间: {{ article.createTime }}</span>
                        <span>状态: {{ article.state }}</span>
                    </div>
                </div>
            </template>
            <div class="card-content">
                <el-row :gutter="20">
                    <!-- 图片列 -->
                    <el-col :span="12" >
                        <div class="grid-content">
                            <img
                                v-if="article.coverImg"
                                :src="article.coverImg"
                                class="avatar"
                                @load="handleImageLoad($event, article)"
                                style="width: 100%; border-radius: 8px;"
                            />
                        </div>
                    </el-col>

                    <!-- 文字内容列 -->
                    <el-col :span="12" >
                        <div class="grid-content" v-html="article.content"></div>
                    </el-col>
                </el-row>
            </div>

            <!-- 引入情感分析组件 -->
            <div class="card-header">
            <ArticleSentimentAnalysis :articleContent="article.content" />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {articleCategoryListService, articleDetailService} from '@/api/article.js'; // 获取单篇文章详情的接口
import { ElMessage } from 'element-plus';
import ArticleSentimentAnalysis from "@/views/chat/ArticleSentimentAnalysis.vue";

const route = useRoute();
const articleId = ref(route.params.id);
const article = ref({});
const categories = ref([]);

//只有获取了日记分类列表才能在单篇文章里面也显示文章名字
const getArticleCategoryList = async () => {
    try {
        let result = await articleCategoryListService();
        categories.value = result.data;
    } catch (error) {
        ElMessage.error('获取文章分类列表失败');
    }
};

const getArticleDetail = async () => {
    try {
        let result = await articleDetailService(articleId.value);
        article.value = result.data;
        // 处理数据，给文章添加 categoryName 属性
        for (let i = 0; i < categories.value.length; i++) {
            if (article.value.categoryId === categories.value[i].id) {
                article.value.categoryName = categories.value[i].categoryName;
                break;
            }
        }
    } catch (error) {
        ElMessage.error('获取文章详情失败');
    }
};

onMounted(async () => {
    await getArticleCategoryList();
    await getArticleDetail();
});

// 处理图片加载完成事件
const handleImageLoad = (event, article) => {
    const img = event.target;
    if (img.width > img.height) {
        img.style.width = '60%';
    } else {
        img.style.width = '45%';
    }
};

</script>

<style lang="scss" scoped>
    @use "@/assets/scss/card-style";

    /* 提高优先级覆盖悬停样式 */
    :deep(.card):hover {
        transform: none !important;
    }
</style>